{% extends "Cart/base.html" %}

{% block title %}确定界面{% endblock %}

{% block file %}
    <link rel="stylesheet" href="{{ url_for('static',filename='css/index.css') }}">
    <script type="text/javascript" src="{{ url_for('static',filename='js/jquery-3.6.0.min.js') }}"></script>
    <script src="{{ url_for('static',filename='css/folder/jquery-1.9.1.min.js') }}"></script>
    <script src="{{ url_for('static',filename='css/folder/holder.js') }}"></script>
    <link href="{{ url_for('static',filename='css/folder/bootstrap.css') }}" rel="stylesheet" type="text/css">
    <script src="{{ url_for('static',filename='css/folder/bootstrap.js') }}"></script>
    <link rel="stylesheet" href="{{ url_for('static',filename='css/folder/orderConfirm.css') }}">
    <link rel="stylesheet" href="{{ url_for('static',filename='css/module.css') }}">
    <link rel="stylesheet" href="{{ url_for('static',filename='css/Cart/2.css') }}">
{% endblock %}

{% block body %}
<!--返回首页-->
<div id="tui">
    <span id="sp11"><a style="text-decoration: none;color: black" href="{{ url_for("index.index") }}">首页</a></span>&nbsp;/
    <span id="sp22"><a style="text-decoration: none;color: black" id="hello2" href="{{ url_for("product.cart") }}">购物车</a></span>
</div>
<!--结算界面-->
<div class="container">
    <div class="col-md-offset-1 col-md-10">
        <div class="col-md-4">
            <div class="col-md-12 order-bar-active" style="background-color: #428BCA;border-radius: 5px">
                1.确认订单信息
                <span class="pull-right"><span class="fa fa-chevron-right"></span></span>
            </div>
        </div>
        <div class="col-md-4">
            <div class="col-md-12 order-bar-undo">
                2.在线支付
                <span class="pull-right"><span class="fa fa-chevron-right"></span></span>
            </div>
        </div>
        <div class="col-md-12">
            <form id="form-create-order" role="form">
                <div class="form-group">
                    <label for="name">
                        <p>选择收货地址：</p>
                    </label>
                    <select name="aid" id="address-list" class="form-control"></select>
                </div>
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <p class="panel-title">订单商品信息：</p>
                    </div>
                    <div class="panel-body">
                        <table class="cart-table" width="100%">
                            <thead>
                            <tr>
                                <th width="15%"></th>
                                <th width="35%">商品</th>
                                <th width="15%">单价</th>
                                <th width="15%">数量</th>
                                <th width="20%">金额</th>
                            </tr>
                            </thead>
                            <tbody id="cart-list" class="cart-body"></tbody>
                        </table>
                        <div class="total-bar">
                            &nbsp;
                            <span class="pull-right">已选商品
										<span id="all-count">0</span>件 总价¥
										<span id="all-price">0</span>元
									</span>
                        </div>
                    </div>
                </div>
                <div class="pay-bar">
                    <a href="{{ url_for('product.cart') }}">返回购物车</a>
                    <span class="pull-right"><input id="btn-create-order" type="button" value="创建订单" class="btn btn-primary btn-lg link-pay"/></span>
                </div>
            </form>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        showCartCheckedList();
        showAddress();
    });
    <!--显示订单商品-->
    function showCartCheckedList() {
        querystring=window.location.search;
        urlParams=new URLSearchParams(querystring)
        cids=urlParams.get('cids')
        console.log(cids)
        $("car-list").empty();
        $.ajax({
            url:"/product/Cart/list/"+cids,
            type:"get",
            dataType:"json",
            success:function (json) {
                console.log(json.data);
                let list=json.data;
                let allcount=0,allprice=0;
                for(let i=0;i<list.length;i++){
                    allcount=allcount+list[i].num;
                    allprice=allprice+list[i].num*list[i].bookprice;
                    let tr="<tr>"+
                    "<td><img src=\"../../static/image/detail/#{image}.png\" class=\"img-responsive\" style='width: 60px;height: 70px' /></td>"+
                    '<td width="29%">'+
                    '《<span style="font-weight: bold">#{bookname}</span>》<br>'+
                    '<span style="background-color: plum">#{author}</span>&nbsp;'+
                    '<span style="background-color: green">#{type}</span>'+
                    "</td>"+
                    "<td>¥<span>#{price}</span></td>"+
                    "<td>#{count}</td>"+
                    "<td><span>#{totalprice}</span></td>"+
                    "</tr>";
                    tr=tr.replace(/#{image}/g,list[i].bookname);
                    tr=tr.replace(/#{bookname}/g,list[i].bookname);
                    tr=tr.replace(/#{author}/g,list[i].bookauthor);
                    tr=tr.replace(/#{type}/g,list[i].booksort);
                    tr=tr.replace(/#{price}/g,list[i].bookprice);
                    tr=tr.replace(/#{count}/g,list[i].num);
                    tr=tr.replace(/#{totalprice}/g,list[i].num*list[i].bookprice);
                    $("#cart-list").append(tr);
                }
                document.getElementById("all-count").innerHTML=allcount;
                document.getElementById("all-price").innerHTML=allprice;
            }
        });
    }
    /*展示地址*/
    function showAddress() {
        $("#address-list").empty();
        $.ajax({
            url:"/product/address",
            type: "get",
            dataType: "json",
            success:function (json) {
                if(json.state==200){
                    let list=json.data;
                    for(let i=0;i<list.length;i++){
                        let opt="<option value='#{aid}'>"+
                        "#{name}&nbsp;&nbsp;&nbsp;"+
                        "#{tag}&nbsp;&nbsp;&nbsp;"+
                        "#{provinceName}#{cityName}#{areaName}#{address}&nbsp;&nbsp;&nbsp;"+
                        "#{phone}"+
                        " </option>";
                        opt=opt.replace(/#{aid}/,list[i].aid);
                        opt=opt.replace(/#{name}/,list[i].name);
                        opt=opt.replace(/#{tag}/,list[i].tag);
                        opt=opt.replace(/#{provinceName}/,list[i].provinceName);
                        opt=opt.replace(/#{cityName}/,list[i].cityName);
                        opt=opt.replace(/#{areaName}/,list[i].areaName);
                        opt=opt.replace(/#{address}/,list[i].address);
                        opt=opt.replace(/#{phone}/,list[i].phone);
                        $("#address-list").append(opt);
                    }
                }
            }
        });
    }
</script>
<!--在线支付-->
<script type="text/javascript">
    layui.use('layer', function(){
         var layer = layui.layer;
        $("#btn-create-order").click(function () {
            let aid=$("#address-list").val();
            querystring=window.location.search;
            urlParams=new URLSearchParams(querystring)
            cids=urlParams.get('cids')
            $.ajax({
                url:"/product/order/create/"+cids+"/"+aid,
                type:"post",
                dataType:"json",
                success:function (json) {
                    if(json.state==200){
                        layer.msg("创建订单成功！",{
                            icon: 1,
                            time: 1000
                        },function (){
                            console.log(json.data);
                            var url="{{ url_for('product.payment') }}?total_price="+json.data.total_price+"&order_time="+json.data.order_time+
                                "&recv_name="+json.data.recv_name+"&oid="+json.data.oid;
                            location.href=url;
                        });
                    }else {
                        layer.alert("创建订单失败！",{icon:2,anim:6});
                    }
                }
            });
        });
    });
</script>
{% endblock %}